<!DOCTYPE html>
<html>
<head lang="en">
  <meta charset="UTF-8">
  <title>标题</title>
  <style>
    #div1{
      width: 300px;
      height: 300px;
      border: 1px solid red;
    }
  </style>
</head>
<body>
<input type="button" value="html()" id="btnHtml1"/>
<input type="button" value="$()" id="btn1"/> <br/><br/>

<div id="div1">
  <p>p1
    <span>span1</span>
  </p>
</div>

</body>
</html>

<script src="jquery-1.12.4.js"></script>
<script>
  $(function () {
    // js原生中创建节点   document.write  innHTML   document.createElement()
    // jq   html()   $()
    $('#btnHtml1').click(function(){
      $('#div1').html('<a href = "https://www.baidu.com">我是百度一下</a>')
    })
    // $()方法是存在内存中的，需要变量来存储，并且追加节点
    $('#btn1').click(function(){
      var $i = $('<a href = "https://www.baidu.com">我是百度一下</a>')
      $('#div1').append($i)
    })
  });
</script>